<template>
    <div class="mixin">
        <helloWorld />
        <h1>{{msg}}</h1>
        <button @click="add">点击</button>
        <button @click="edit">更改mixin的数据</button>

        <h1>{{money | formTime}}</h1>
    </div>
</template>
<script>
import mixin from '../mixin/index.js'
import helloWorld from '../components/HelloWorld'
export default {
    // data里面的数据  是mixin先执行 组件/页面的会覆盖掉mixin 所以data里面的数据命名冲突的时候  展示的是页面/组件的
    data() {
        return {
            msg:'我是页面里面的msg数据',
            money:100,
        }
    },
    components:{helloWorld},
    created(){
        console.log('我是页面的created');
    },
    mounted() {
        console.log('我是页面的mounted');
    },
    methods: {
        edit(){
            // mixin的数据都是私有的 一个组件更改  另一个组件使用不会受到隐藏
           this.msg = '我是修改后的mixin数据'
        },
        add(){
            console.log('我是页面的方法');   //methods里面的方法  汇入的先执行  页面的覆盖掉混入的 
        }
    },
    filters:{
        formTime(val){
           return val+'万-----我是页面的' //过滤器  页面的覆盖混入的
        }
    },

    // methods   data  computed  filters..... 页面/组件和混入 冲突的时候 页面的会覆盖掉 混入的 （混入的先执行的）


    // 声明周期钩子函数   不会覆盖  混入先执行 
    mixins:[mixin] //mixin注入
}



</script>